<template>
	<view class="current pt-re">
		<!-- <image class="top-img pt-ab" src="/static/icon/my/ball.png" mode=""></image> -->
		<view class="arcbottom">
		</view>
		<view class="userInfo f-row ai-c box-border">
			<block v-if="userInfo" >
				<image :src="userInfo.avatar" class="avatar" mode="" @tap="jumpPage"></image>
				<view class="iName-phone f-column jc-sb box-border"  @tap="jumpPage">
					<view class="iName">
						{{userInfo.nickname}}
					</view>
					<view class="phone">
						{{userInfo.mobile}}
					</view>
				</view>
				<view @tap="jumpPage">
					<text class="shezhi" >设置</text>
					<view class="" style="position: absolute;right: 50upx;top: 40rpx">
						<u-icon name="setting" size="50" color="#fff" class="icon-setup"></u-icon>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="f-row ai-c">
					<button class="iName-phone f-row ai-c jc-c login" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">
					<view class="empty avatar f-row ai-c jc-c">
						<u-icon size="34" name="account-fill" color="#c9c9c9"></u-icon>
					</view>
					</button>
					<!-- 	<view class="iName-phone f-row ai-c jc-c login" @tap="login()">
						立即登录
					</view> -->
					<button class="iName-phone f-row ai-c jc-c login" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">登录</button>
					<!-- 	<button class="iName-phone f-row ai-c jc-c login" 
							@click="getInfo">登录</button> -->
				</view>
			</block>
		</view>
		<view class="RealName">
			<view class="left">
				<view class="info">
					实名认证信息
				</view>
				<view class="tip">
					实名认证，让信息变得更完整哦！
				</view>
			</view>
			<view class="authe">
				<u-button class="custom-style" shape="circle" text="立即认证"
					customStyle="background-color: #00C777;color:#fff" @click="goAuth"></u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<wxLoginPopup :isVisible="showPop" @update="close" :mobile="mobile" />
	</view>
</template>

<script>
	// let WebIM = require("@/utils/WebIM")["default"];
	// let disp = require("../../utils/broadcast");
    import wxLoginPopup from '@/pages/my/wx-login-popup.vue';
	import {
		wxLogin,
		getWxPhone,
		upRegister,
		getUser
	} from '@/request/api.js'
	import {
		log
	} from 'util';
	export default {
		props: {
			userInfo: {
				type: Object,
				default: null
			},
			userData: null
		},
		components: {
			wxLoginPopup
		},
		data() {
			return {
				userCode: null,
				show: false,
				showPop:false,
				mobile: '',
				nickName: '',
				showUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', 
				// customStyle: {
				// 	marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				// 	color: 'red'
				// }
			}
		},
		methods: {
			async onChooseAvatar(e) {
				let {
					avatarUrl
				} = e.detail
				// 我这边是把文件上传到云服务器
				let getavatarUrl = await this.uploadFilePromise(avatarUrl)
				this.avatarUrl = getavatarUrl.url
				this.showUrl = getavatarUrl.showUrl
				// console.log(this.avatarUrl,'1',this.showUrl)
			},
			// 上传头像图片到服务器
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${base.apiUrl}/common/userUpload`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
						},
						success: (res) => {
							setTimeout(() => {
								resolve({
									url: JSON.parse(res.data).data.url,
									showUrl: JSON.parse(res.data).data.fullurl,
								})
							}, 1000)	
						},
						fail(fails) {
							console.log(fails)
						}
					});
				})
			},
			// 昵称输入事件
			inputName(e) {
				const {
					value
				} = e.detail
				this.nickName = value
				// do something
			},
			// 关闭按钮点击事件
			close() {
				this.$emit('update', false)
			},
			getUser() {
				getUser().then(res => {
					if (res.data.is_certification == 0) {
						if (res.data.is_auth == 1) {
							uni.showToast({
								title: '您的人信息的认证等待审核！',
								duration: 1500,
								icon: 'none'
							})
							return false;
						}
						uni.navigateTo({
							url: '/my_pages/myAuth/myAuth'
						})
					} else {
						uni.showToast({
							title: '您的人信息的认证已成功！',
							duration: 1500,
							icon: 'none'
						})

					}
				})
			},
			goAuth() {
				this.getUser()
			},
			getInfo() {
				wx.requestSubscribeMessage({
					tmplIds: ['Yn-YFpEaQSWsspK2cY7Y72hMH_h3scrfUO5j9wDFcVI'],
					  success (res) { 
						console.log(res,'res')
					}
				})
				wx.getUserProfile({
					lang: "zh_CN",
					withCredentials: true,
					desc: '用于完善资料',
					success: (res) => {
						wx.login({
							provider: 'weixin',
							success: loginRes => {
								console.log(res.userInfo)
								wxLogin({
									code: loginRes.code,
									avatar: res.userInfo.avatarUrl,
									nickname: res.userInfo.nickName,
									gender: res.userInfo.gender,
									mobile: this.mobile,
								}).then(r => {
									uni.showToast({
										title: '登录成功',
										duration: 1500
									})
									uni.setStorageSync('userInfo', r.data)
									this.show = false;
									uni.setStorageSync('token', r.data.token)
									// console.log(r)
									uni.$emit('hasLogin', true)
								})
							}
						})
					},
					fail: (err) => {
						uni.removeStorageSync('token')
						uni.removeStorageSync('userInfo')
						uni.$emit('hasLogin', false)
						console.log(err, '用户信息失败');
						uni.showToast({
							icon: 'none',
							title: '登录失败，请重试！'
						})
					}
				})
			},
			refuse() {
				uni.clearStorageSync('token')
				this.show = false
			},
			open() {
				
			},
			close() {
				this.showPop = false
				// console.log('close');
			},
			/* 个人信息 */
			jumpPage() {
				uni.navigateTo({
					url: '/pages/my/userInfo'
				})
			},
			/* 登录 */
			getPhoneNumber(e) {
				// console.log(e.detail.code)
				getWxPhone({
					code: e.detail.code
				}).then(res => {
					this.mobile = res.data.mobile
					this.showPop = true;
					// this.show = true
					/* this.getWxUserinfo() */
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.choose-avatar-row,
	.choose-nickname-row {
		width: 100%;
		height: 20%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10px 20px;
		font-size: 24rpx;
		border-bottom: 1px solid #F2F2F2;
	
		.avatar-wrapper {
			width: 40px;
			height: 40px;
			margin: 0;
			padding: 0;
			margin-right: 33rpx;
	
			.avatar {
				width: 100%;
				height: 100%;
			}
		}
	}
	.choose-nickname-row {
		border-top: none;
	
		text {
			width: 45px;
			margin-right: 24rpx;
			color: #807E7E;
			;
		}
	}
	.login-row {
		width: 100%;
		height: 30%;
		padding-top: 0px;
		display: flex;
		margin-bottom: 20px;

		button {
			font-size: 24rpx;
			width: 30%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-color: transparent;
			color: #157DFA;
			background: #FFFFFF;
			;
		}
	
		button:last-of-type {
			font-size: 24rpx;
			width: 30%;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-color: transparent;
			color: #fff;
			background: #157DFA;
		}
	
		.inactive {
			color: #ccc;
		}
	}
	
	
	button::after {
		border: none;
	}

	.custom-style {
		color: #ff0000;
		width: 400rpx;
	}

	button {
		background-color: transparent;
		color: #fff;
	}

	.RealName {
		display: flex;
		background: #fff;
		z-index: 1;
		margin: 160rpx 30rpx;
		align-items: center;
		border-radius: 15px;

		.left {
			padding: 15rpx;
			flex: 1;
		}

		.authe {
			margin-right: 15rpx;
		}

		.tip {
			color: #979797;
			margin-top: 8rpx;
			margin-bottom: 8rpx;
			font-size: 26rpx;
		}
	}

	.empty {
		background-color: #f1f1f1;
	}

	.login {
		font-size: 42upx;
	}

	.iName-phone {
		padding: 15upx 20upx;
		height: 140upx;
	}

	.userInfo {
		position: absolute;
		top: 150upx;
		color: #fff;
		width: 100%;
		padding: 0 30upx;
	}

	.icon-setup {
		width: 70upx;
		height: 70upx;
		position: absolute;
		right: 30upx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 999;
		
	}

	.avatar {
		width: 140upx;
		height: 140upx;
		border-radius: 50%;
	}

	.top-img {
		right: 0;
		top: 0;
		width: 360upx;
		height: 360upx;
		z-index: 9;
	}

	.current {
		background-image: url('../../static/icon/my/bj.png');
		background-size: contain;
		height: 246px;
		background-repeat: no-repeat;

	}
	.shezhi{
		height: 56upx;
		position: absolute;
		right: 160upx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 999;
		color: #fff;
		font-size: 55rpx;
		font-weight: 700;
	}
	.arcbottom {
		width: 200%;
		position: relative;
		height: 300upx;
		// background-color: $common-color;
		// border-bottom-left-radius: 140%;
		// border-bottom-right-radius: 140%;
		// left: 50%;
		// transform: translateX(-50%);
	}
</style>
